<template>
  <ul class="header-active">
    <template v-for="item in tableData">
      <li :class="activeName === item.name?'active':''" @click="setActiveName(item)">
        <component :is="item.icon" :style="{width:'20px',height:'20px',marginRight:'4px'}"/>
        {{ item.title }}
      </li>
    </template>
  </ul>
</template>

<script setup>
import {useRoute, useRouter} from 'vue-router'
import {ref, watchEffect} from "vue";

const route = useRoute()
const router = useRouter()

defineProps(['tableData'])

const activeName = ref('ecoRun')

watchEffect(() => {
  if (route.query.type) {
    activeName.value = route.query.type
  }
})


const setActiveName = (item) => {
  router.push({path: item.path, query: {type: item.name}}).then(() => {
    activeName.value = item.name
  })
}

</script>

<style scoped lang="scss">

</style>
